<template>
  <ve-ring
    :data="chartData"
    :settings="settings"
    :theme-name="'datav'"
    :width="width"
    :tooltip-visible="tooltipVisible=='true'"
    :legend-visible="legendVisible=='true'"
    :height="height"
    :before-config="beforeConfig"
    :after-set-option="afterSetOption"
    :after-set-option-once="adapterAfterSetOptionOnce"
    :events="events"
  ></ve-ring>
</template>

<script>
import basicProp from "../../../util/vchartBasicProp";
import { pie } from "../../../util/vchartData";
export default {
  name: "dveChartRing",
  props: Object.assign(basicProp, {
    chartData: {
      type: Object,
      default: () => {
        return pie();
      }
    },
    /**
     * percent数据类型的小数位
     */
    digit: {
      type: String,
      default: "2"
    },
    /**
     * 数据类型
     */
    dataType: {
      type: String,
      default: "normal"
    },
    /**
     * legend数量限制
     */
    legendLimit: {
      type: String,
      default: undefined
    },
    /**
     * 悬浮放大动画
     */
    hoverAnimation: {
      type: String,
      default: "true"
    },
    /**
     * 饼图半径
     */
    radius: {
      type: String,
      default: undefined
    },
    /**
     * 纵向偏移
     */
    offsetY: {
      type: String,
      default: undefined
    },
    roseType: {
      type: String,
      default: undefined //radius ， area
    },
    /**
     * 饼图图形上的文本标签，相关属性参考echarts
     */
    label: {
      type: Object,
      default: () => {
        return undefined;
      }
    },
    /**
     * 图形样式
     */
    itemStyle: {
      type: Object,
      default: () => {
        return undefined;
      }
    },
    /**
     * 标签的视觉引导线样式
     */
    labelLine: {
      type: Object,
      default: () => {
        return undefined;
      }
    },
    level: {
      type: String,
      default: ""
    },
    /**
     * 设置超过此数字时使用‘其他’代替
     */
    limitShowNum: {
      type: String,
      default: undefined
    }
  }),
  data: function() {
    return {
      timer: null
    };
  },
  methods: {
    bindLoop(e, t) {
      let currentIndex = -1;
      let len = this.chartData.rows.length;
      if (this.timer) clearInterval(this.timer);
      this.timer = setInterval(function() {
        e.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % len;
        // 高亮当前图形
        e.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        // 显示 tooltip
        e.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }, t);
    },
    adapterAfterSetOptionOnce(e) {
      if (
        this.activeTimeGap &&
        parseInt(this.activeTimeGap) > 0 &&
        (!this.level || this.level.length == 0)
      ) {
        this.bindLoop(e, parseInt(this.activeTimeGap));
      }
      this.afterSetOptionOnce(e);
    }
  },
  computed: {
    settings() {
      let _setting = {
        dataType: this.dataType,
        hoverAnimation: this.hoverAnimation.toLowerCase() === "true",
        label: this.label,
        itemStyle: this.itemStyle,
        labelLine: this.labelLine
      };
      if (this.dimension && this.dimension.length > 0) {
        _setting.dimension = this.dimension;
      }
      if (this.metrics && this.metrics.length > 0) {
        _setting.metrics = this.metrics;
      }
      if (this.legendLimit && this.legendLimit.length > 0) {
        _setting.legendLimit = parseInt(this.legendLimit);
      }
      if (this.selectedMode && this.selectedMode.length > 0) {
        _setting.selectedMode = this.selectedMode;
      }
      if (
        this.radius &&
        this.radius.length > 0 &&
        this.radius.indexOf(",") >= 0
      ) {
        _setting.radius = this.radius.split(/,/);
      }
      if (this.offsetY && this.offsetY.length > 0) {
        _setting.offsetY = parseInt(this.offsetY);
      }
      if (this.digit && this.axisSiteRight.length > 0) {
        _setting.digit = parseInt(this.digit);
      }
      if (this.roseType && this.roseType.length > 0) {
        _setting.roseType = this.roseType;
      }
      if (this.limitShowNum && this.limitShowNum.length > 0) {
        _setting.limitShowNum = parseInt(this.limitShowNum);
      }
      if (this.level && this.level.length > 0) {
        let levelArr = [];
        if (this.level.indexOf(";") > 0) {
          let arr = this.level.split(/;/);
          arr.forEach(a => {
            if (a.indexOf(",") > 0) {
              levelArr.push(a.split(/,/));
            }
          });
          _setting.level = levelArr;
        }
      }
      return _setting;
    },
    extendAssign() {
      let data = this.extend;
      return data;
    }
  },
  beforeDestroy() {
    if (this.timer) clearInterval(this.timer);
  },
  mounted() {
    console.log(this.chartData);
    console.log(this.settings);
  }
};
</script>

<style>
</style>